<template>
  <!-- 图片轮播 -->
  <div class="home-view-container">
    <div class="carousel-card-container">
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
        <ImageCarousel />
      </el-card>
    </div>

    <el-row :gutter="15" style="margin-top: 20px">
      <!-- 系统公告 -->
      <el-col :span="10" :offset="0">
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
          <SystemAnnouncement
            :title="annoucementTitle"
            :content="announcementContent"
            :id="announcementId"
          />
        </el-card>
      </el-col>
      <!-- 最新活动 -->
      <el-col :span="14" :offset="0">
        <el-card class="box-card">
          <div class="card-header">
            <span class="moretitle">最新活动</span>
            <el-button class="button" text
              >更多
              <el-icon>
                <ArrowRight />
              </el-icon>
            </el-button>
          </div>
          <div class="card-content">
            <ActivityList :activities="activities" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6" v-for="club in clubs">
        <ClubRecommendationCard
          :id="club.id"
          :club-introduction="club.introduction"
          :club-name="club.clubName"
          :club-tags="club.tags"
          :member-count="club.memberCount"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import ImageCarousel from "./components/ImageCarousel.vue";
import SystemAnnouncement from "@/views/CommonViews/HomeView/components/SystemAnnouncement.vue";
import ActivityList from "@/views/CommonViews/HomeView/components/ActivityList.vue";
import ClubRecommendationCard from "@/views/CommonViews/HomeView/components/ClubRecommendationCard.vue";
import { onMounted, ref } from "vue";
import {
  type Activity,
  ClubControllerService,
  type ClubVO,
  SystemAnnouncementControllerService,
} from "../../../../generated";
import { ElMessage } from "element-plus";

const annoucementTitle = ref("");
const announcementContent = ref("");
const announcementId = ref(0);

const activities = ref<Activity[]>([]);
const clubs = ref<ClubVO[]>([]);

onMounted(async () => {
  const announcementRes =
    await SystemAnnouncementControllerService.getSystemAnnouncements({
      pageSize: 10,
      current: 1,
    });
  if (announcementRes.code === 0) {
    const announcements = announcementRes.data?.records;
    annoucementTitle.value = announcements[0].title;
    announcementContent.value = announcements[0].content;
    announcementId.value = announcements[0].id;
  } else {
    ElMessage.error("加载数据失败" + announcementRes.message);
  }

  const clubRes = await ClubControllerService.listClubVoByPage({
    pageSize: 10,
    current: 1,
  });
  if (clubRes.code === 0) {
    clubs.value.push({
      id: clubRes.data?.records[1].id,
      introduction: clubRes.data?.records[1].introduction,
      clubName: clubRes.data?.records[1].clubName,
      tags: clubRes.data?.records[1].tags,
      memberCount: clubRes.data?.records[1].memberCount,
    });
    clubs.value.push({
      id: clubRes.data?.records[5].id,
      introduction: clubRes.data?.records[5].introduction,
      clubName: clubRes.data?.records[5].clubName,
      tags: clubRes.data?.records[5].tags,
      memberCount: clubRes.data?.records[5].memberCount,
    });
    clubs.value.push({
      id: clubRes.data?.records[9].id,
      introduction: clubRes.data?.records[9].introduction,
      clubName: clubRes.data?.records[9].clubName,
      tags: clubRes.data?.records[9].tags,
      memberCount: clubRes.data?.records[9].memberCount,
    });
    clubs.value.push({
      id: clubRes.data?.records[10].id,
      introduction: clubRes.data?.records[10].introduction,
      clubName: clubRes.data?.records[10].clubName,
      tags: clubRes.data?.records[10].tags,
      memberCount: clubRes.data?.records[10].memberCount,
    });
  } else {
    ElMessage.error("加载数据失败" + clubRes.message);
  }
});
</script>

<style scoped lang="scss">
.home-view-container {
  width: 95%;
  margin: 0 auto;
  .carousel-card-container {
    width: 100%;
    margin: 20px auto;
  }

  :deep(.el-card) {
    border-radius: 8px;
    overflow: hidden;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-content {
    margin-top: 20px;
  }
}

.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.moretitle {
  font-size: large;
  font-weight: 600;
}
.notice {
  cursor: pointer;
  display: flex;
  height: 30px;
  line-height: 30px;
  .title {
    font-size: 14px;
    font-weight: 600;
    color: #666666;
  }
  .date {
    font-size: 14px;
    margin-left: 20px;
  }
}
.activities-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
</style>
